<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">{{ lang_note.sendNote }}</view>
				<view @click="senNoteAction">{{ lang_common.publish }}</view>
			</view>
			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>
		
		<!-- 内容 -->
		<view style="padding: 32rpx 30rpx 0;">
			<!-- 标题输入 -->
			<view class="form-title u-p-b-24 u-m-b-24">
				<input
				 v-model="form.title"
				 :placeholder="lang_note.sendNote_titleTips"
				 class="u-f-32 u-lh-44"
				 />
			</view>
			
			<!-- 内容输入 -->
			<view class="form-content u-p-b-24">
				<textarea
				 v-model="form.content"
				 :placeholder="lang_note.sendNote_contentTips"
				 class="u-f-32 u-lh-44"
				 style="width: 100%"
				 maxlength="-1"
				 :rows="7"/>
			</view>
			
			<!-- 图片视频 -->
			<view class="file-container u-m-b-14">
				<x-upload @change="changeFile" upload-video @fail="settingValue = 'camera'"></x-upload>
			</view>
		</view>
		
		<!-- 分割线 -->
		<u-gap height="6" bgColor="#F6F7F9"></u-gap>
		
		<!-- 关联商家 -->
		<view style="padding: 26rpx 34rpx 22rpx;">
			<view class="flex-center-between">
				<view class="flex-center">
					<image
					src="@/static/image/common/relation.png"
					class="clear-flex"
					style="width: 32rpx; height: 32rpx;"
					></image>
					<view class="u-m-l-6 u-f-28 u-lh-40 font-medio">{{ lang_note.sendNote_relationShop }}</view>
				</view>
				<x-see-more :content="lang_note[form.relation ? 'sendNote_changeRelationTips' : 'sendNote_relationTips']" @click="relationAction"></x-see-more>
			</view>
			<!-- 商家列表 -->
			<view v-if="form.relation">
				<view class="relation-container flex-center-between u-m-t-16">
					<view class="flex-center">
						<view class="relation-avatar clear-flex u-m-r-16">
							<x-image :src="showImage(form.relation.logoImgUrl, 'logo')"/>
						</view>
						
						<view class="flex-between flex-column">
							<view class="u-f-34 u-lh-48 font-medio">{{ form.relation.name }}</view>
							
							<view class="u-f-24 u-lh-34 color-grew">{{ formatAddress(form.relation, 1) || '' }}</view>
						</view>
					</view>
					
					<view @click="delateRelation">
						<u-icon name="close-circle-fill" color="#fc3229" size="60"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分割线 -->
		<u-gap height="6" bgColor="#F6F7F9"></u-gap>
		
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import { notesPublish } from '@/api/user/notes.js'
	export default {
		data() {
			return {
				form: {
					title: '',
					content: '',
					filelist: [],
					relation: null
				},
				
				isClick: false,
				settingValue: ''
			}
		},
		methods: {
			// 文件变化
			changeFile(filelist) {
				this.form.filelist = filelist
			},
			// 进行获取商家
			relationAction() {
				uni.navigateTo({
					url: '/pages/user/note/relation/relation',
					events: {
						// 更新商家信息
						changeAction: e => {
							this.$set(this.form, 'relation', e)
						}
					},
					success: res => {
						res.eventChannel.emit('changeRelation', this.form.relation)
					}
				})
			},
			// 删除商家
			delateRelation() {
				this.form.relation = null
			},
			// 发布笔记
			senNoteAction() {
				let { title, content, filelist, relation } = this.form
				let str = ''
				if (!title) {
					return this.$api.msg(this.lang_note.sendNote_titleTips)
				} else if (!content) {
					return this.$api.msg(this.lang_note.sendNote_contentErrorTips)
				} else if (!filelist.length) {
					return this.$api.msg(this.lang_note.sendNote_mediaErrorTips)
				}
				let imgUrls = filelist.map(item => item.fileUrl).join(',')
				let queryObj = { title, content, imgUrls }
				if (relation) {
					queryObj.merchantId = relation.merchantId
				}
				if (this.isClick) return;
				this.isClick = true
				notesPublish(queryObj).then(() => {
					this.$api.msg('发布成功')
					let timer = setTimeout(() => {
						this.isClick = false
						uni.redirectTo({
							url: '/pages/user/note/list/list?type=discover'
						})
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.form {
		&-title {
			border-bottom: 2rpx solid #E3E5E8;
		}
		
		&-content {
			width: 100%;
		}
	}
	
	.relation {
		&-avatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 14rpx;
			background-color: #f9f9f9;
		}
		&-container {
			padding: 16rpx 22rpx 18rpx;
			border-radius: 16rpx;
			background-color: #f9f9f9;
		}
	}
</style>
